<template>
	<div class="monitor">
		<div class="monitor-wrapper">
		<div class="left"  @click="isAddcategory=false">
			<!--<div v-for="(item,index) in ByOrgCode" class="menus">
				<div  class="subNav" :class="{active:activeName==index}" @click="activeName=index,queryKeyWord(item.id)">
					<span>{{item.categoryName}}</span>
				</div>
			</div>-->
			<div class="lists">
				<div class="menus" v-for="(item,index) in ByOrgCode" :key="index" @click.stop="">
					<div class="subNav">
						<div class="cate" :class="{active:activeName==index}" v-show="item.isud==false" @click="activeName=index,queryKeyWord(item.id)">{{item.categoryName}}</div>
						<input type="text" v-show="item.isud==true" value="item.categoryName" v-model="item.newText">
						<i class="categoryCheck" v-show="item.isud==true&&item.newText!=''" @click="upCG(item)"></i>
						<i class="categoryWrite" v-show="item.isud==false" @click="item.isud = true"></i>
						<i class="categoryDelete" v-show="item.isud==false" @click="delCG(item)"></i>
					</div>
				</div>
				<div class="menus" v-show="isAddcategory==true" @click.stop=""> 
					<div class="subNav">
						<input type="text" v-model="categoryText" @keyup.enter="saveCG()">
						<i v-show="categoryText!=''" class="categoryCheck" @click="saveCG()"  ></i>
					</div>
				</div>
			</div>
			<div class="category" v-show="ByOrgCode.length<15" @click.stop="addcategory()">
				新建类别
			</div>
		</div>
		<div class="right Intelligence" v-show="pattern">
			<div class="query">
				<div class="check">
					<el-checkbox v-model="checkAllFlag" @change="checkAll()"></el-checkbox>
				</div>
				<div class="search">
					<span class="keyword">关键词名</span>
					<el-input
					  v-model="searchinput"
					  class="searchinput"
					  icon="search"
					  :on-icon-click="handleIconClick"
					  >
					</el-input>
					<span @click="pattern=false">高级模式</span>
				</div>
				<div class="btns">
					<el-button @click="add()">添加</el-button>
					<el-button @click="deltetAll()">删除</el-button>
				</div>
			</div>
			<div class="keytitle">
				<div class="check">
					
				</div>
				<div class="name">关键词名</div>
				<div class="names">关键词组</div>
			</div>
			<!-- 添加 -->
			<div  class="substance" v-if="isAddshow">
				<div class="items" :model="form">
					<div class="check"></div>
					<div class="headerimg">
						<span><input type="text" v-model="form.name"></span>
					</div>
					<div class="items-names" >
						<div >
							<div class="title">地名</div>
							<div class="content"><input type="text" v-model="form.distKeyword"></div>
						</div>
						<div>
							<div class="title">人名</div>
							<div class="content"><input type="text" v-model="form.nameKeyword" ></div>
						</div>
						<div>
							<div class="title">事件名</div>
							<div class="content"><input type="text" v-model="form.eventKeyword"></div>
						</div>
						<div>
							<div class="title">排除</div>
							<div class="content"><input type="text" v-model="form.excludeKeyword"></div>
						</div>
					</div>
				</div>
				<div class="update">
					<el-button @click="addKeyWord()">确定</el-button>
					<el-button @click="isAddshow=false">取消</el-button>
				</div>
			</div>
			<!-- end -->
			<div v-for="(item,index) in IntelligenceList" class="substance" :key="index">
				<div class="items" >
					<div class="check">
						<el-checkbox v-model ="item.check" @change="checkOne()"></el-checkbox>
					</div>
					<div class="headerimg">
						<span><input type="text" v-model="item.name" :disabled="item.iseditor"></span>
					</div>
					<div class="items-names" >
						<div >
							<div class="title">地名</div>
							<div class="content"><input type="text" v-model="item.distKeyword" :disabled="item.iseditor"></div>
						</div>
						<div>
							<div class="title">人名</div>
							<div class="content"><input type="text" v-model="item.nameKeyword" :disabled="item.iseditor"></div>
						</div>
						<div>
							<div class="title">事件名</div>
							<div class="content"><input type="text" v-model="item.eventKeyword" :disabled="item.iseditor"></div>
						</div>
						<div>
							<div class="title">排除</div>
							<div class="content"><input type="text" v-model="item.excludeKeyword" :disabled="item.iseditor"></div>
						</div>
					</div>
					<div  class="items-btn" v-show="item.iseditor==true">
						<div><el-button @click="item.iseditor = false">修改</el-button></div>
						<div><el-button @click="deleteOne(item)">删除</el-button></div>
					</div>
				</div>
				<div class="update" v-show="item.iseditor==false">
					<el-button @click="update(item,index)">确定</el-button>
					<el-button @click="item.iseditor = true">取消</el-button>
				</div>
			</div>
			<!-- 分页 -->
	    <div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-size="100"
		      layout="total, prev, pager, next, jumper"
		      :total="IntelligenceList.length">
		    </el-pagination>
	    </div>
		</div>
		<div class="right senior" v-show="!pattern">
			<div class="mmp-top">
				<span @click="pattern=true">智能模式</span>
				<span class="active">高级模式</span>
				<div class="m-btns">
						<el-button @click="additem = true">添加</el-button>
						<!-- <el-button>删除</el-button> -->
				</div>
			</div>
			<table class="m-body">
				<tr>
					<th>序号</th>
					<th>关键词名</th>
					<th>关键词表达式</th>
					<th>操作</th>
				</tr>
				<tr class="additem" v-show="additem">
					<td>新增</td>
					<td>
						<input type="text" placeholder="周边区县" v-model="seniorname">
					</td>
					<td>
						<input type="text" placeholder="(中国)+(江苏)+(沐阳,扬州)" v-model="seniorkeyExpression">
					</td>
					<td>
						<el-button @click="addsenior">保存</el-button>
						<el-button @click="additem = false">取消</el-button>
					</td>
				</tr>
				<tr v-for="(item,index) in senior" :key="index">
					<td>{{index+1}}</td>
					<td>
						<input type="text" v-model="item.name" :disabled="item.iseditor">
					</td>
					<td>
						<input type="text" v-model="item.keyExpression" :disabled="item.iseditor">
					</td>
					<td>
						<el-button @click="item.iseditor = false" v-show="item.iseditor">修改</el-button>
						<el-button  @click="delsenior(item)" v-show="item.iseditor">删除</el-button>
						<el-button @click="updatesenior(item)" v-show="!item.iseditor">保存</el-button>
						<el-button  @click="item.iseditor = true" v-show="!item.iseditor">取消</el-button>
						
					</td>
				</tr>
				
			</table>
			
			<div class="pagination">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="pageNum"
		      :page-size="100"
		      layout="total, prev, pager, next, jumper"
		      :total="senior.length">
		    </el-pagination>
	    </div>
		</div>
		</div>
	</div>
</template>
 <script scoped>
	import {limitText} from 'utils'
	export default {
		name:'monitor',
		data() {
			return{
				checkAllFlag:false,
				activeName:0,
				ByOrgCode:[],
				pageNum:1,
				pageSize:30,
				keywordList:[],
				parentId:0,
				searchinput:'',
				form:{
					name:'',
					distKeyword:'',
					nameKeyword:'',
					eventKeyword:'',
					excludeKeyword:''
				},
				isAddshow:false,
				iscategory:true,
				isAddcategory:false,
				categoryText:'',
				pattern:true,//模块展示
				IntelligenceList:[],
				senior:[],//高级
				seniorname:'',
				seniorkeyExpression:'',
				additem:false
			}
		},
		mounted(){
			this.queryByOrgCode()
		},
		methods:{
			addcategory(){
				if(this.ByOrgCode.length > 14){
					this.$message.error('分类数量最多为15个')
					return false
				}
				this.isAddcategory=true
			},
			// 匹配中文
			fomartL(val){
				let out =  /[\u4e00-\u9fa5]/.test(val)
				if(!out){
					this.$confirm('地名必须为中文', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					});
				}
				return out
			},
			//匹配关键词名长度
			fomartname(val){
				let out =  /^\S{1,5}$/.test(val)
				if(!out){
					this.$confirm('关键词名必须为1到五个字符', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					});
				}
				return out
			},
			//三个有一个不为空
			fomartArr(arr){
				let out =  arr.some(d=>d)
				if(!out){
					this.$confirm('人名 事件名 排除 必须填一个', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					});
				}
				return out
			},
			// 添加窗口
			add(){
				if(this.parentId==0){
					this.$alert('没有新建类别啊', '错误', {
						confirmButtonText: '确定',
						callback: action => {
						}
					});
				}else{
					this.isAddshow=true
				}
			},
			// 修改
			upCG(item){
				if(!this.fomartname(item.newText)) return
				this.$http.post('vrv-monitor-platform-web/category/update',{
					id:item.id,
					categoryName:item.newText
				}).then(r=>{
					let info=r.body.message
					if(r.body.success==true){
						this.$message.success('修改成功')
						this.queryByOrgCode()
					}else if(r.body.success==false){
						this.$message.error(info)
						this.queryByOrgCode()
					}
				})
			},
			// 保存分類
			saveCG(){
				if(!this.fomartname(this.categoryText)) return
				this.$http.post('vrv-monitor-platform-web/category/insert',{
					categoryName:this.categoryText.trim()
				}).then(r=>{
					if(r.body.success==true){
						this.$message.success('添加成功')
						this.isAddcategory = false
						this.queryByOrgCode()
						this.categoryText=''
					}else{
						let info=r.body.message
						this.$message.error(info)
					}
				})
			},
			//刪除分類
			delCG(item){
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						this.$http.post('vrv-monitor-platform-web/category/delete',{
							id:item.id
						}).then(r=>{
							let info=r.body.message
							if(r.body.success==true){
								this.$message.success('刪除成功')
								this.queryByOrgCode()
							}else if(r.body.success==false){
								this.$message.error(info)
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				
			},
			// 查询分类
			queryByOrgCode(){
				this.$http.post('vrv-monitor-platform-web/category/queryByOrgCode').then((res)=>{
					if (res.body.success==true) {
						this.ByOrgCode = res.body.data
						this.ByOrgCode.forEach(value=>{
							this.$set(value,'isud',false)
							this.$set(value,'newText',value.categoryName)
						})
						let tmp
						(tmp = this.ByOrgCode[0]) && this.queryKeyWord(tmp.id)
					};
				})
			},
			// 查询关键词
			queryKeyWord(id){
				this.parentId = id
				this.$http.post('vrv-monitor-platform-web/moniterkey/queryByOrgCode',{
					parentId:id,
					pageNum:this.pageNum,
					pageSize:this.pageSize
				}).then((res)=>{
					let _keywordList =res.body.data 
					_keywordList.forEach((item,index)=>{
						item.check = false
						item.iseditor = true
					})
					this.keywordList = _keywordList
					this.IntelligenceList = _keywordList.filter( d => parseInt(d.advanced) == 0)
					this.senior = _keywordList.filter( d => parseInt(d.advanced) == 1)

				})
			},
			checkAll(){
				this.keywordList.forEach((value,index)=>{
					value.check = this.checkAllFlag
				})
			},
			checkOne(){
		    	if(this.checkAllFlag){
		    		this.checkAllFlag = false
		    	}
		    },	
			handleSizeChange(val) {
					this.pageSize = val
					this.queryKeyWord(this.parentId)
			},
			handleCurrentChange(val) {
					this.pageNum= val
					this.queryKeyWord(this.parentId)
			},

			// 修改
			update(item){
				if(!this.fomartname(item.name)) return
				if(!this.fomartL(item.distKeyword)) return
				if(!this.fomartArr([item.nameKeyword,item.eventKeyword,item.excludeKeyword])) return
				if(!limitText([item.excludeKeyword,item.eventKeyword,item.nameKeyword],this)) return
				item.iseditor = true
				this.$http.post('vrv-monitor-platform-web/moniterkey/update',{
					id:item.id,
					name:item.name.trim(),
					parentId:this.parentId,
					distKeyword:item.distKeyword.trim(),
					nameKeyword:item.nameKeyword.trim(),
					eventKeyword:item.eventKeyword.trim(),
					excludeKeyword:item.excludeKeyword.trim(),
				}).then((res)=>{
					let info=res.body.message
					if(res.body.success==true){
						this.$message.success('修改成功')
						//this.queryByOrgCode()
					}else{
						this.$message.error(info)
						//this.queryByOrgCode()
					}
				})
			},
			// 删除单个
			deleteOne(item,index){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http.post('vrv-monitor-platform-web/moniterkey/delete',{
					id:item.id
				}).then((res)=>{
					let info=res.body.message
					if (res.body.success==true) {
						this.queryKeyWord(this.parentId)
						this.$message.success('删除成功')
					}else if(res.body.success==false){
						this.$message.error(info)
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
			},
			delsenior(item){
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let res = await this.$http.post('vrv-monitor-platform-web/moniterkey/delete',{
						id:item.id
					})
					if (res.body.success==true) {
						this.$message.success('删除成功')
						this.queryKeyWord(this.parentId)
					}else if(res.body.success==false){
						this.$message.error(res.body.message)
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			// 新增
			addKeyWord(){
				if(!this.fomartname(this.form.name)) return
				if(!this.fomartL(this.form.distKeyword)) return
				if(!this.fomartArr([this.form.nameKeyword,this.form.eventKeyword,this.form.excludeKeyword])) return
				this.$http.post('vrv-monitor-platform-web/moniterkey/insert',{
					name:this.form.name.trim(),
					parentId:this.parentId,
					advanced:0,
					distKeyword:this.form.distKeyword.trim(),
					nameKeyword:this.form.nameKeyword.trim(),
					eventKeyword:this.form.eventKeyword.trim(),
					excludeKeyword:this.form.excludeKeyword.trim(),
				}).then((res)=>{
					if (res.body.success==true) {
						this.isAddshow = false
						this.queryKeyWord(this.parentId)
						this.form.name = ''
						this.form.distKeyword = ''
						this.form.nameKeyword = ''
						this.form.eventKeyword = ''
						this.form.excludeKeyword = ''
					}else{
						this.$message.error(res.body.message)
					}
				})
			},
			async addsenior(){
				if(!this.fomartname(this.seniorname)) return
				let res = await this.$http.post('vrv-monitor-platform-web/moniterkey/insert',{
						name:this.seniorname.trim(),
						parentId:this.parentId,
						advanced:1,
						keyExpression:this.seniorkeyExpression.trim(),
					})
					if (res.body.success==true) {
						this.$message.success('新增成功')
						this.queryKeyWord(this.parentId)
						this.additem = false
					}else{
						this.$message.error(res.body.message)
					}
			},
			async updatesenior(item){
				if(!this.fomartname(item.name)) return
				let res = await this.$http.post('vrv-monitor-platform-web/moniterkey/update',{
					id:item.id,
					advanced:1,
					name:item.name.trim(),
					keyExpression:item.keyExpression.trim()
				})
				if (res.body.success==true) {
						this.$message.success('修改成功')
						this.queryKeyWord(this.parentId)
						item.iseditor = true
					}else{
						this.$message.error(res.body.message)
						this.queryByOrgCode()
					}
			},
			// 选择删除
			deltetAll(){
			let flag = false
			if(this.keywordList.every(d => !d.check)){
				this.$message.error('请选择数据')
				return;
			}
				this.$confirm('此操作将删除该关键词, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						for(let i=this.IntelligenceList.length-1;i >=0;i--){
							let item = this.IntelligenceList[i]
							if(item.check == true){
								this.$http.post('vrv-monitor-platform-web/moniterkey/delete',{
									id:item.id
								}).then(res=>{
									let info=res.body.message 
									if (res.body.success==true) {
										this.queryKeyWord(this.parentId)
										this.$message({
											type: 'success',
											message: '删除成功!'
										});
									}else if(res.body.success==false){
											this.$message({
											type: 'error',
											message: info
										});
									}
								})
							}
							}
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
		    },
		    handleIconClick(){
		    	this.$http.post('vrv-monitor-platform-web/moniterkey/searchByName',{
		    		parentId:this.parentId,
		    		pageNum:this.pageNum,
		    		pageSize:this.pageSize,
		    		name:this.searchinput
		    	}).then(res=>{
		    		let _keywordList =res.body.data 
					_keywordList.forEach((item,index)=>{
						item.check = false
						item.iseditor = true
					})
					this.keywordList = _keywordList
					this.IntelligenceList = this.keywordList.filter( d => parseInt(d.advanced) == 0)
		    	})
		    }	
		}
	}
</script>
<style lang="stylus" scoped>
	/* 新增 */
	.Intelligence
	.senior
		border-left solid 1px rgba(220, 220, 220, 1)
		.mmp-top
			height 50px
			line-height 50px
			background-color rgba(246, 246, 246, 1)
			border-bottom solid 1px rgba(220, 220, 220, 1)
			span
				margin-left 74px
				font-size 14px
				cursor pointer
				&:first-child
					margin-right 22px
				&.active
					color #ec6941
				&:hover
					color #ec6941
			.m-btns
				float right
				margin-right 82px
				button
					width 80px
		.m-body
			width 100%
			text-align center
			tr
				height 61px
				&.additem
					input
						border solid 1px #5ebde8
				th	
					color #535353
					font-weight normal 
					border-bottom solid 1px rgba(220, 220, 220, 1)
				td
					border-bottom solid 1px rgba(220, 220, 220, 1)
					input
						display block
						margin 0 auto
						width 70%
						text-align center
						border-radius 5px 5px 5px 5px
						border solid 1px #5ebde8
						box-sizing border-box
						&:disabled
							border 0


	

	/* end */
	::-webkit-scrollbar{
		width:4px;
	}
	::-webkit-scrollbar-track{
		background: #e7e7e7;
	}
	::-webkit-scrollbar-thumb{
		height:3.7rem;
		background:#c2c7cc;
	}
	.lists{
		height: calc(100vh - 22.6rem);
		overflow-y: auto;
	}
	.monitor{
		margin-top: 1rem;
	}
	.monitor-wrapper{
		display: flex;
	}

	.monitor .left{
		position: relative;
		display: inline-block;
		width: 12.5rem;
		border-right: 1px solid #dcdcdc;
		border-top: 1px solid #dcdcdc;
		height: calc(100vh - 15.6rem);
		margin-right: 8px;

	}
	.monitor .text{
		display: inline-block;
		padding-left: 1.56rem;
		font-size: 1.88rem;
		color: #333;
	}
	.monitor input{
		display: block;
		width: 100%;
		padding: 0 0.5rem;
		box-sizing: border-box;
		border-radius: 4px;
		box-shadow: 0;
		outline: none;
		border: 1px solid #5ebde8;
		height: 2.18rem;
		margin-top: 2px;
	}
	.monitor input:disabled{
		border-color: transparent;
	    background: transparent;
	    text-align: center;
	}
	.monitor .assortment{
		position: relative;
		height: 3.75rem;
		line-height: 3.75rem;
		background: #eeeeee;
		border-bottom: 1px solid #dcdcdc;
	}
	.monitor .assortment .fa{
		position: absolute;
		font-size: 1.56rem;
		right: 3.125rem;
		top: 1.25rem;
	}
	.monitor .subNav{
		height: 3.2rem;
		border-bottom: 1px solid #dcdcdc;
		line-height: 3.2rem;
		position: relative;
		overflow: hidden;
	}
	.monitor .subNav.active span{
		color: #0167d5;
	}

	.monitor .subNav span{
		display: block;
		padding-left: 1.56rem;
		font-size: 0.88rem;
		color: #333;
	}
	.monitor .right{
		flex:1;
		border-top: 1px solid #dcdcdc;
		height: calc(100vh - 15.6rem);
		overflow-y: auto;
	}
	.monitor .query{
		display: flex;
		height: 3.75rem;
		align-items:center;
		border-bottom: 1px solid #dcdcdc;
		background: #f6f6f6;
	}
	.monitor .check{
		height: 100%;
		width: 4.375rem;
		text-align: center;
		border-right: 1px solid #dcdcdc;
		border-left: 1px solid #dcdcdc;
	}
	.monitor .check .el-checkbox{
		margin-top: 1.125rem;
	}
	.monitor .query .search{
		font-size: 0
	}
	.monitor .query .search span{
			display:inline-block;
			font-size:14px;
			margin-left:20px;
			cursor:pointer;
		}
	.monitor .query .search span:last-child:hover{
		color: #ec6941;
	}	
	.monitor .query .keyword{
		display: inline-block;
		width: 9rem;
		text-align: center;
		font-size: 0.88rem;
		color: #333333;
	}
	.monitor  .searchinput{
		display: inline-block;
		width: 21.8rem;
	}
	.monitor .btns{
		flex:1;

	}
	
	.monitor .btns button{
		width: 5.9rem;
		float: right;
		margin-right: 1.128rem;
	}
	.monitor .right .keytitle{
		display: flex;
		height: 3.75rem;
		border-bottom:1px solid #dcdcdc; 

	}
	.monitor .right .keytitle .name{
		height: 100%;
		width: 9.1rem;
		flex:0 0 9.1rem;
		text-align: center;
		font-size: 0.88rem;
		color: #333;
		line-height: 3.75rem;
		border-right: 1px solid #dcdcdc;
		box-sizing:border-box;
	}
	.monitor .right .keytitle .names{
		flex:1;
		text-align: center;
		font-size: 0.88rem;
		color: #333;
		line-height: 3.75rem;
	}
	.monitor .items{
		display: flex;
		height: 10rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.monitor .items .headerimg{
		text-align: center;
		width: 9.1rem;
		border-right: 1px solid #dcdcdc;
		padding: 0 5px;
		box-sizing:border-box;
	}
	.monitor .items .headerimg img{
		display: block;
		margin: 0 auto;
		margin-top: 1.625rem;
		border-radius: 50%;
		border: 1px solid #dcdcdc;
	}
	.monitor .items .headerimg span{
		display: block;
		margin-top: 3.9rem;
		font-size: 0.88rem;
		color: #000;
	}
	.monitor .items .items-names{
		flex:1;
		border-right: 1px solid #dcdcdc;

	}
	.monitor .items .items-names >div{
		display: flex;
		height: 2.5rem;
		border-bottom: 1px solid #dcdcdc;
		box-sizing:border-box;
		line-height: 2.5rem;
	}
	.monitor .items .items-names >div:last-child{
		border-bottom: none;
	}
	.monitor .items .items-names .title{
		width: 17.5rem;
		text-align: center;
		font-size: 0.88rem;
		color:#666;
		border-right: 1px solid #dcdcdc;
	}
	.monitor .items .items-names .content{
		flex:1;
		text-align: center;
		font-size: 0.88rem;
		color:#666;
		padding: 0 0.3rem;
	}
	.monitor .items .items-btn button{
		width: 5.9rem;
		font-size: 0.88rem;
		color: #000;
	}
	.monitor .items .items-btn div{
		width: 12.5rem;
		text-align: center;
	}
	.monitor .items .items-btn div:first-child{
		margin-bottom: 1.25rem;
		margin-top: 2.125rem;
	}
	.monitor .first-item{
		height: 3.75rem;
		text-align: center;
		border-bottom: 1px solid #dcdcdc;
	}
	.monitor .first-item button{
		margin-top: 0.75rem;
		width: 5.9rem;
	}
	.monitor .first-item button:first-child{
		margin-right: 6.25rem;
	}
	.monitor .pagination{
		float: right;
		padding: 15px 15px;
		padding-right: 2rem;
	}
	.monitor .update{
		text-align: center;
		height: 3rem;
		line-height: 0.93rem;
		border-bottom: 1px solid #dcdcdc;
	}
	.monitor .update button{
		width: 6.25rem;
		height: 2.18rem;
		margin-top: .3rem;
	}
	.monitor .update button:first-child{
		margin-right: 3rem;
	}
	.category{
		position: absolute;
		bottom: 1rem;
		text-align: center;
		color: #0267cf;
		border: 1px solid #0267cf;
		border-radius: 5px;
		height: 2.1rem;
		line-height: 2.1rem;
		width: 8rem;
		margin: 2rem auto;
		cursor: pointer ;
		margin-left:2.25rem;
	}
	.categoryInput{
		position: relative;
		height: 2.1rem;
		width: 11rem;
		border-radius: 5px;
		margin: 0.8rem auto;
		border: 1px solid #dcdcdc;
	}
	.categoryInput input{
		border: none;
		height: 100%;
		margin: 0;
		padding-right: 2.5rem;
	}
	.subNav input{
		width: 11rem;
		margin: 0.6rem auto;
		border: 1px solid #dcdcdc;
		text-align: left !important;
	}
	.subNav .cate{
		width: 11rem;
		margin: 0.6rem auto;
		cursor: pointer;
		font-size: 0.88rem;
		height: 2.18rem;
		padding:0 0.5rem;
		box-sizing: border-box;
		color: rgb(84, 84, 84);
		line-height: 2.18rem;
	}
	.subNav .cate.active{
		color: #0060d3;
	}

	.subNav .cate:hover{
		color: #0060d3;
	}
	.subNav i{
		position: absolute;
		padding-left: 0;
		width: 1rem;
		height: 1rem;
		overflow: hidden;
		background-image: url(./img/category.png);
		background-repeat:  no-repeat;
	}
	.categoryCheck{
		right: 1.5rem;
		top: 1.3rem;
		background-position: -49px 0;
		cursor: pointer;
	}
	.categoryWrite{
		display: none;
		right: 2.6rem;
		top: 1.1rem;
		background-position: -20px 0;
		cursor: pointer;
	}
	.categoryDelete{
		display: none;
		right: 0.7rem;
		top: 1.1rem;
		background-position: 3px -1px;
		cursor: pointer;
	}
	.subNav:hover .categoryDelete,.subNav:hover .categoryWrite{
		display: block;
	}
	.menus{
		position: relative;
	}


</style>